// subpack2/pagges/popover/index.js
const { uCharts } = require('../../../common/lib');

// console.log(uCharts);
var uChartsInstance = {};

Page({

    data: {
        cWidth: 500,
        cHeight: 300
    },
    onReady() {
        let wxInfo = wx.getSystemInfoSync()
        //这里的第一个 750 对应 css .charts 的 width
        const cWidth = 750 / 750 * wxInfo.windowWidth;
        //这里的 500 对应 css .charts 的 height
        const cHeight = 500 / 750 * wxInfo.windowWidth;
        this.setData({ cWidth, cHeight });

        // this.createSelectorQuery()
        //     .select('#column')
        //     .fields({
        //         node: true,
        //         size: true,
        //     })
        //     .exec((res) => {
        //         if (Array.isArray(res)) {
        //             // console.log(res[0]);
        //             const canvas = res[0].node;
        //             canvas.width = cWidth;
        //             canvas.height = cHeight;

        //             const ctx = canvas.getContext('2d');
        //             ctx.fillRect(0, 0, 100, 100)
        //         }            
        //     })

        this.getServerData();
    },
    getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
            //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
            let res = {
                categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
                series: [
                    {
                        name: "目标值",
                        data: [35, 36, 31, 33, 13, 34]
                    },
                    {
                        name: "完成量",
                        data: [18, 27, 21, 24, 6, 28]
                    }
                ]
            };
            this.drawCharts('column', res);
        }, 500);
    },
    drawCharts(id, data) {
        let self = this
        self.createSelectorQuery()
            .select('#' + id)
            .fields({
                node: true,
                size: true,
            })
            .exec((res) => {
                if (Array.isArray(res)) {
                    // console.log(res[0]);
                    const canvas = res[0].node;
                    const ctx = canvas.getContext('2d');
                    const dpr = wx.getSystemInfoSync().pixelRatio
                    canvas.width = res[0].width * dpr
                    canvas.height = res[0].height * dpr

                    ctx.scale(dpr, dpr)


                    uChartsInstance[id] = new uCharts({
                        type: "column",
                        context: ctx,
                        width: res[0].width,
                        height: res[0].height,
                        categories: data.categories,
                        series: data.series,
                        animation: false,
                        background: "#FFFFFF",
                        padding: [15, 15, 0, 5],
                        xAxis: {
                            disableGrid: true
                        },
                        yAxis: {
                            data: [{ min: 0 }]
                        },
                        extra: {
                            column: {
                                type: "group"
                            }
                        }
                    });
                }
            })
    },
})